import React from 'react';
import Lazyload from 'react-lazyload'; 
import style from './Channel.module.scss';
import {useHistory} from 'react-router';
interface Iprops {
    channel:Array<object>,
}

const Channel:React.FC<Iprops> = props=>{
    const history = useHistory();
    return <div className={style.channel}>
        {
            props.channel.map((item:any)=>{
                return <dl 
                    key={item.id}
                    onClick={()=>history.push(`/category/${item.id}`)}
                    >
                    <dt>
                        <Lazyload>
                            <img src={item.icon_url} alt=""/>
                        </Lazyload>
                    </dt>
                    <dd>{item.name}</dd>
                </dl>
            })
        }
    </div>
}

export default Channel